<template>
  <a-modal
    :title="`添加目标（${this.form.instanceId}）`"
    :visible="visible"
    :footer="null"
    :width="800"
    @cancel="hide"
  >
    <a-spin
      :spinning="loading"
    >
      <a-table
        :loading="loading"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps }"
        :columns="columns"
        :data-source="data"
      >
        <template slot="status" slot-scope="record">
          <span v-if="record.state === 'NEW'"><a-badge status="processing" /> {{ record.stateDesc }}</span>
          <span v-if="record.state === 'DONE'"><a-badge status="success" /> {{ record.stateDesc }}</span>
        </template>
      </a-table>
      <div class="btns">
        <a-button type="primary" @click="onSubmit">
          添加
        </a-button>
        <a-button style="margin-left: 10px;" @click="hide">
          取消
        </a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
// API
import { fetchMyMissions } from '@/api/mission'
import { addBatchMission, detail } from '@/api/instance'

const columns = [
  // { title: '编号', dataIndex: 'id', key: 'id' },
  { title: '目标内容', dataIndex: 'content', key: 'content' },
  { title: '状态', key: 'status', scopedSlots: { customRender: 'status' } },
  { title: '到期日', dataIndex: 'dueDate', key: 'dueDate' }
]

export default {
  name: 'AddMission',
  data () {
    return {
      columns,

      visible: false, // 是否显示模态框
      loading: false, // 是否加载
      loaded: false,

      form: {
        instanceId: undefined,
        missionIds: []
      },

      data: [],
      originMissionList: [], // 原目标列表
      selectedRowKeys: []
    }
  },
  methods: {
    // 显示
    async show (record, type) {
      console.log('record and type: ', record, type)
      if (record.id) { this.form.instanceId = record.id }
      this.record = record
      this.visible = true
      this.init()
    },
    // 关闭
    hide () {
      this.loaded = false
      this.loading = false
      this.visible = false

      this.form.instanceId = undefined
      this.form.missionId = []

      this.record = null

      this.data = []
      this.originMissionList = []
      this.selectedRowKeys = []
    },

    async onSubmit () {
      try {
        this.loading = true
        console.log('this.form!', this.form)
        const params = { ...this.form }
        params.missionIds = this.selectedRowKeys.join(',')
        await addBatchMission(params)
        this.hide()
        this.$emit('mission-added', this.record)
      } catch (error) {
        this.$notification.error({
          message: '错误',
          description: error.message || '请求错误，请稍后重试'
        })
      } finally {
        this.loading = false
      }
    },
    handleChange (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    onSelectChange (selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    getCheckboxProps (record) {
      return {
        props: {
          disabled: this.originMissionList.indexOf(record.id) > -1
        }
      }
    },
    async init () {
      try {
        this.loading = true
        const content = await fetchMyMissions({
          pageNumber: 1,
          pageSize: 1000,
          isInGroup: false
        })
        this.data = content

        const instance = await detail(this.record.id)
        this.originMissionList = instance.missionList.map(mission => mission.id)
        this.loaded = true
      } catch (error) {

      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.btns{
  display:flex;
  justify-content: center;
  align-items: flex-end;

  height: 50px;
}
</style>
